<script lang="tsx">
import { h, watchEffect } from 'vue'
import GzMenu from './GzMenu.vue'
import { MenuItem } from 'ant-design-vue'

function filterFunc(item) {
  return (typeof item.type) != 'symbol' // 过滤掉 v-if=false 的元素
}

export default {
  setup(props, { slots }) {
    return () => {
      const visibleSlots = slots.default?.().filter(filterFunc) || []
      
      if (visibleSlots.length <= 3) {
        // 不超过3个时使用块级元素布局
        return h(
          'div',
          { 
            class: 'gz-table-columns-block',
            key: 'block-layout'
          },
          visibleSlots.map((slot, index) => 
            h('div', { class: 'gz-table-column-item', key: `item-${index}` }, slot)
          )
        )
      } else {
        // 超过3个时：前2个显示，其余放入下拉菜单
        return (
          <div class="gz-table-columns-block" key="dropdown-layout">
            {visibleSlots.slice(0, 2).map((slot, index) => (
              <div class="gz-table-column-item" key={`inline-${index}`}>
                {slot}
              </div>
            ))}
            <GzMenu key="dropdown-menu">
              {visibleSlots.slice(2).map((slot, index) => (
                <MenuItem key={`menu-${index}`}>{slot}</MenuItem>
              ))}
            </GzMenu>
          </div>
        )
      }
    }
  }
}
</script>

<style scoped>
.gz-table-columns-block {
  display: block;
}

.gz-table-column-item {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px;
}

/* 保持下拉菜单样式与原有一致 */
.gz-table-columns-block :deep(.ant-menu) {
  display: inline-block;
  vertical-align: middle;
}
</style>